<template>
  <Card>
    <p slot="title">商户管理</p>
    <div class="search-con search-con-top">
      <div>
        运营商：
        <Select v-model="searchData.operator_id" style="width:180px" filterable>
          <Option v-for="item in operatorList" :value="item.id" :key="item.id">{{ item.name }}
          </Option>
        </Select>
        司机名字：
        <Input v-model="searchData.name" placeholder="请输入司机名字" style="width: 200px"></Input>
        司机手机号：
        <Input v-model="searchData.phone" placeholder="请输入手机号" style="width: 200px"></Input>
        <Button @click="search" type="primary" shape="circle" icon="ios-search" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" type="success" shape="circle" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
      </div>
    </div>
    <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
      <template slot="addressSlot" slot-scope="{ row, index }">
        <Tooltip placement="top">
          <p>{{ row.detail[0].imei }}</p>
          <div slot="content">
            <!-- <p>{{ row.detail[0].imei }}</p> -->
            <p>{{ row.detail[1].imei }}</p>
            <p>{{ row.detail[2].imei }}</p>
          </div>
        </Tooltip>
      </template>
      <template slot-scope="{ row , index}" slot="makeSlot">
        <!--                <i-button type="primary" size="small" @click="edit(row)">编辑</i-button>-->
        <Button v-if="(row.status == '已完成' && row.is_sync == '未下调')" type="primary" size="small"
          @click="isSync(row)">完成下调</Button>
        <Button v-else type="text" ghost size="small" @click="details(row)">
          <p style="color: #168afd;">详情</p>
        </Button>
        <Drawer :title="titleT" v-model="drawer_details" width="520" :mask-closable="false" @on-close="closeDrawer"
          :styles="styles">
          <Form ref="formValidate" :model="formData" :label-width="100">
            <FormItem label="商户名称">
              <Input v-model="formData.franchiser_name" placeholder=""></Input>
            </FormItem>
            <FormItem label="商户联系人">
              <Input v-model="formData.franchiser_contact" placeholder=""></Input>
            </FormItem>
            <FormItem label="商户手机号">
              <Input v-model="formData.franchiser_phone" placeholder=""></Input>
            </FormItem>
            <FormItem label="商户地址">
              <Input v-model="formData.franchiser_address" placeholder=""></Input>
            </FormItem>
            <FormItem label="安装台数">
              <Input v-model="formData.cupboard_num" placeholder=""></Input>
            </FormItem>
            <FormItem label="签约BD">
              <Input v-model="formData.bd_name" placeholder=""></Input>
            </FormItem>
            <FormItem label="BD电话">
              <Input v-model="formData.bd_phone" placeholder=""></Input>
            </FormItem>
            <FormItem label="司机">
              <Input v-model="formData.driver_name" placeholder=""></Input>
            </FormItem>
            <FormItem label="司机电话">
              <Input v-model="formData.driver_phone" placeholder=""></Input>
            </FormItem>
            <FormItem label="所属运营商">
              <Input v-model="formData.operator_name" placeholder=""></Input>
            </FormItem>
            <FormItem label="安装单号">
              <Input v-model="formData.order_no" placeholder=""></Input>
            </FormItem>
            <FormItem label="设备IMEI">
              <Input v-model="row.detail[0].imei" placeholder=""></Input>
            </FormItem>
            <FormItem label="柜机照片" label-position="top">
              <div class="photo">
                <img :src="row.detail[0].images" alt="">
              </div>
            </FormItem>
            <!-- <FormItem label="审核操作">
              <RadioGroup v-model="auditAction" @on-change="onChange">
                <Radio :label="Past">验收</Radio>
                <Radio :label="rej">驳回</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem v-if="isRejectShow" label="驳回原因" label-position="top">
              <Input type="textarea" v-on:input="reason" :rows="3" placeholder="" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="submit()">提交</Button>
            </FormItem> -->
          </Form>
        </Drawer>
        <!-- <Modal v-model="rejectDetailShow" title="已驳回详情">
          <p>驳回原因：</p>
          <p>{{ row.reason }}</p>
        </Modal> -->
      </template>

    </Table>
    <br>

    <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
    </Page>
    <!-- 驳回弹框 -->
  </Card>
</template>

<script>
import expandRow from './table-expand.vue';
import { DeliveryUserList } from '@/api/user'
export default {
  components: { expandRow },
  data() {
    return {
      // rejectDetailShow: false,
      titleT: '1111',
      drawer_details: false,
      Past: 1,
      rej: 2,
      // isRejectShow: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formData: {
        open_time: ''
      },

      searchData: {
        page: 1,
        limit: 10
      },
      // 列表
      columns: [
        // {
        //   type: 'selection',
        //   width: 40
        // },
        {
          type: 'expand',
          width: 30,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          },
        },
        {
          title: '编号',
          key: 'id',
        },
        {
          title: '所属运营商',
          key: 'operator_name',
        },
        {
          title: '安装单号',
          key: 'order_no',
        },
        {
          title: '安装台数',
          key: 'cupboard_num',
        },
        {
          title: '设备IMEI',
          slot: 'addressSlot',
          width: 150
        },
        {
          title: '司机',
          key: 'driver_name',
        },
        {
          title: '司机手机号',
          key: 'driver_phone',
        },
        {
          title: '验收状态',
          key: 'status'
        },
        {
          title: '创建时间',
          key: 'create_time',
          width: 180
        },
        {
          title: '下调状态',
          key: 'is_sync',
        },
        {
          title: '操作',
          slot: "makeSlot",
        }
      ],
      // 数据
      list: [],
      total: 0,
      //运营商列表
      operatorList: [],
      driverList: [],
      driver_id: [],
      //驳回
      rejectShow: false,
      bdFormItem: {},
      operatorBdmList: [],
      operator_id: [],
      isDetailsSshow: false, //详情展示状态
      isSyncShow: true, // 完成下调按钮展示状
      // rejectReason: '',// 驳回原因字段
      // auditAction: ''
    }
  },
  methods: {
    search() {
      this.searchData.page = 1;
      this.getCupboardInstallList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getCupboardInstallList();
    },
    del() {

    },
    changePage(page) {
      this.searchData.page = page;
      this.getCupboardInstallList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getCupboardInstallList();
    },
    //运营商户列表
    getOperatorList() {
      this.$axios('/adminstatistics/getOperatorList', {}).then(res => {
        this.operatorList = res;
      });
    },
    //获取司机列表
    getDriverList() {
      DeliveryUserList().then(res => {
        this.driverList = res
      })
    },
    modalCancel() { },
    // 待安装柜机列表 验收
    // getAuditInstallOrder() {
    //   let params = {
    //     id: this.formData.id,
    //     status: this.auditAction,
    //     reason: this.rejectReason
    //   }
    //   this.$axios('/admincupboard/auditInstallOrder', params).then(res => {
    //   })
    // },
    //下调商户
    getsyncCupboard(obj) {
      let params = {
        id: obj.id
      }
      this.$axios('/admincupboard/syncCupboard', params).then(res => {
      })
    },
    // 待安装列表
    getCupboardInstallList() {
      this.$axios('/admincupboard/getCupboardInstallList', {}).then(res => {
        this.list = res.data
        this.total = res.total;
        this.list.forEach(item => {
          if (item.is_sync == 1) {
            item.is_sync = '已下调'
          } else {
            item.is_sync = '未下调'
          }
          if (item.status == 1) {
            item.status = '待验收'
            item.is_sync = ''
          }
          if (item.status == 2) {
            item.status = '已完成'
          }
          if (item.status == 3) {
            item.status = '超时结束'
          }
        })
      })
    },
    // submit() {
    //   this.drawer_details = false;
    //   this.getAuditInstallOrder()
    //   this.getCupboardInstallList()
    // },
    reason(e) {
      this.rejectReason = e
    },

    isSync(obj) {
      this.getsyncCupboard(obj)
      if (obj.is_sync == 1) {
        obj.is_sync = '已下调'
      }
      this.getCupboardInstallList()
    },
    // onChange(e) {
    //   if (e == 2) {
    //     this.isRejectShow = true;
    //     this.auditAction = 2
    //   } else {
    //     this.isRejectShow = false;
    //     this.auditAction = 1
    //   }
    // },
    details(item) {
      console.log(item, 'wwwwwwwwwwwwwwwwww');
      this.formData = item
      this.drawer_details = true
      if (this.formData.status == '待验收') {
        this.titleT = '待验收详情'
      }
      if (this.formData.status == '已完成') {
        this.title = '已完成详情'
      }
      if (this.formData.status == '超时结束') {
        this.title = '超时结束详情'
      }
    },
    closeDrawer() {
      // this.onChange()
    },
  },
  created() {
    this.getOperatorList();
    this.getDriverList()
    this.getCupboardInstallList()
  }
}
</script>
<style lang="less" scoped>
.ivu-form-item {
  margin-bottom: 8px;
}

.photo {
  width: 370px;
  height: 100px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
}

/deep/.ivu-form .ivu-form-item-label {
  font-weight: 700 !important;
}

// /deep/.ivu-form-item-content {
//     display: flex !important;
//     padding-left: 70px;

//     p {
//         width: 50px;
//     }
// }

// /deep/.ivu-form-item {
//     .ivu-input {
//         width: 70% !important;
//         padding: 0 !important;
//     }
// }

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
